# This imports all the layers for "iPhone 6 Template" into iphone6TemplateLayers1
sketch1 = Framer.Importer.load "imported/iPhone 6 Template"
# sketch1.Imported_Layers.visible = false

scroll = ScrollComponent.wrap(sketch1.Group)
scroll.width = 750
scroll.height = 1032
scroll.x = 0
scroll.y = 204
scroll.scrollHorizontal = false
scroll.contentInset = {
    top: 110
    bottom: 40
    right: 0
    left: 0
}

scroll.scrollY = 110

prop =
    y: 250, width: 20, height: 20, borderRadius: 10,
    backgroundColor: "#4c4c4c", opacity: 0, index: 1

layerDot1 = new Layer prop
layerDot1.x = scroll.midX  # 80

layerDot2 = new Layer prop
layerDot2.x = scroll.midX - 30  # 80

layerDot3 = new Layer prop
layerDot3.x = scroll.midX - 60  # 80

layerDot4 = new Layer prop
layerDot4.x = scroll.midX + 30  # 80

layerDot5 = new Layer prop
layerDot5.x = scroll.midX + 60  # 80

animate_prop = 
    properties: { opacity: 1 }
    curve: "spring(200,20,0)"
animate_prop_close = 
    properties: { opacity: 0 }
    curve: "spring(200,20,0)"

could_reflash = false

scroll.on Events.Scroll, ->
    if scroll.scrollY < 0
	    layerDot1.animate animate_prop
    else
    	layerDot1.animate animate_prop_close
    if scroll.scrollY < -40
        layerDot2.animate animate_prop
        layerDot4.animate animate_prop
    else
    	layerDot2.animate animate_prop_close
    	layerDot4.animate animate_prop_close
    	
    if scroll.scrollY < -80
        layerDot3.animate animate_prop
        layerDot5.animate animate_prop
        could_reflash = true
    else
    	layerDot3.animate animate_prop_close
    	layerDot5.animate animate_prop_close
    	could_reflash = false

# After the scroll animation
scroll.on Events.ScrollAnimationDidEnd, ->
	if not could_reflash
	    layerDot1.opacity = 0
	    layerDot2.opacity = 0
	    layerDot3.opacity = 0
	    layerDot4.opacity = 0
	    layerDot5.opacity = 0

# http://stakes.github.io/framerplayground/
animate_prop_blind = 
    properties: { opacity: 1 }
    curve: "spring(100,1,0)"
    time: 4
animate_prop_blind2 = 
    properties: { opacity: 1 }
    curve: "spring(100,1,0)"
    time: 4, delay: 0.5
    
scroll.on Events.ScrollAnimationDidStart, ->
	if could_reflash
		could_reflash = false
		
		layerDot1.animate animate_prop_blind
		layerDot2.animate animate_prop_blind2
		layerDot3.animate animate_prop_blind
		layerDot4.animate animate_prop_blind2
		layerDot5.animate animate_prop_blind
		
		scroll.animateStop()
		scroll.scrollToPoint(
		    { x: 0, y: -110 },
		    animate = true,
		    animationOptions = { curve: "ease", time: 1 }
		)
		Utils.delay 4, ->
			scroll.scrollToPoint(
			    { x: 0, y: 0 },
			    animate = true,
			    animationOptions = { curve: "ease", time: 1 }
			)

# Create a ScrollComponent
# scroll = new ScrollComponent
#     width: 1200, height: 1200
#
# # Create the content layers
# layerA = new Layer
#     width: 750, height: 96
#     superLayer: scroll.content
#
# layerB = new Layer
#     width: 750, height: 96, y: 106
#     superLayer: scroll.content
#     # Listen to any page switch
#
# page = PageComponent.wrap(sketch.ding1)
#
# page.on "change:currentPage", ->
#     for layer in indicators
#         layer.animate
#             properties: { opacity: 0.5 }
#             time: 0.2
#
#     current = page.currentPage
#     i = page.horizontalPageIndex(current)
#
#     indicators[i].animate
#         properties: opacity: 1
#         time: 0.2